<?php
/**
 * Home Template 3 - 时尚布局
 * 基于HTML文件夹中的index3.html
 * 
 * @package WP Bootstrap Woo
 */

// 确保直接访问被阻止
defined('ABSPATH') || exit;

?>

<!-- newsletter-modal start -->
<div class="newsletter-modal modal fade" id="newslettermodal" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="news-close" data-bs-dismiss="modal"><i class="feather-x"></i></button>
                <div class="newsletter-info">
                    <div class="newsletter-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/home3/newsletter/popup.jpg" class="img-fluid" alt="popup">
                    </div>
                    <div class="newsletter-content">
                        <h2>15% off</h2>
                        <p>On your first purchase</p>
                        <div class="newsletter-form">
                            <form method="post" class="news-form">
                                <div class="news-wrap">
                                    <input type="email" name="q" placeholder="Enter your email" required>
                                    <button type="button" class="btn-style2">Subscribe</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- newsletter-modal end -->

<!-- main-content start -->
<main class="main-content" id="mainContent">
    <!-- home-slider start -->
    <section class="home-slider">
        <div class="home-banner">
            <div class="home-slider-area owl-carousel owl-theme">
                <div class="home-slider-content">
                    <div class="container-fluid">
                        <div class="home-bg-1">
                            <div class="home-content-wrap">
                                <div class="row">
                                    <div class="col-12 col-md-8 col-lg-7">
                                        <div class="home-content">
                                            <div class="home-banner-content">
                                                <h1>Trendy Fashion</h1>
                                                <p>Discover the latest trends in fashion and style. Get the perfect look for every occasion with our exclusive collection.</p>
                                                <a href="<?php echo wc_get_page_permalink('shop'); ?>" class="btn-style1">Shop collection</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home-slider-content">
                    <div class="container-fluid">
                        <div class="home-bg-2">
                            <div class="home-content-wrap">
                                <div class="row">
                                    <div class="col-12 col-md-8 col-lg-7 offset-md-4 offset-lg-5">
                                        <div class="home-content">
                                            <div class="home-banner-content">
                                                <h1>Premium Quality</h1>
                                                <p>Experience luxury and quality with our premium product line. Crafted with attention to detail and excellence in mind.</p>
                                                <a href="<?php echo wc_get_page_permalink('shop'); ?>" class="btn-style2">Explore premium</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home-slider-content">
                    <div class="container-fluid">
                        <div class="home-bg-3">
                            <div class="home-content-wrap">
                                <div class="row">
                                    <div class="col-12 col-md-8 col-lg-7">
                                        <div class="home-content">
                                            <div class="home-banner-content">
                                                <h1>Limited Edition</h1>
                                                <p>Get your hands on our exclusive limited edition products. Unique designs that won't be available forever.</p>
                                                <a href="<?php echo wc_get_page_permalink('shop'); ?>" class="btn-style1">Get yours now</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- home-slider end -->

    <!-- service start -->
    <section class="service">
        <div class="container">
            <div class="service-area">
                <ul class="service-main">
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-truck"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>Free shipping</h5>
                            <p>Free delivery on orders over $100</p>
                        </div>
                    </li>
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-award"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>Premium quality</h5>
                            <p>High quality guaranteed products</p>
                        </div>
                    </li>
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-headphones"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>24/7 Support</h5>
                            <p>Dedicated support team</p>
                        </div>
                    </li>
                    <li class="service-wrap">
                        <div class="service-icon">
                            <span class="s-icon">
                                <i class="feather-shield"></i>
                            </span>
                        </div>
                        <div class="service-content">
                            <h5>Secure payment</h5>
                            <p>100% secure payment gateway</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- service end -->

    <!-- trending products start -->
    <section class="trending-products">
        <div class="container">
            <div class="trending-pro-area">
                <div class="section-title">
                    <h3>Trending now</h3>
                    <p>Discover what's popular and trending right now</p>
                </div>
                <div class="trending-pro-content">
                    <div class="row">
                        <?php
                        // 获取热门产品（基于销量和评分）
                        $args = array(
                            'post_type' => 'product',
                            'posts_per_page' => 6,
                            'orderby' => 'popularity',
                            'order' => 'DESC',
                            'meta_query' => array(
                                array(
                                    'key' => '_visibility',
                                    'value' => array('catalog', 'visible'),
                                    'compare' => 'IN'
                                )
                            )
                        );
                        
                        $trending_products = new WP_Query($args);
                        
                        if ($trending_products->have_posts()) :
                            while ($trending_products->have_posts()) : $trending_products->the_post();
                                global $product;
                                ?>
                                <div class="col-12 col-lg-4 col-md-6">
                                    <div class="pro-item pro-item-main">
                                        <div class="product-link">
                                            <div class="product-img">
                                                <a href="<?php the_permalink(); ?>" class="product-image">
                                                    <?php echo woocommerce_get_product_thumbnail(); ?>
                                                </a>
                                                <div class="product-label">
                                                    <span class="badge trending-badge">Trending</span>
                                                </div>
                                                <div class="product-action">
                                                    <div class="pro-action">
                                                        <a href="<?php the_permalink(); ?>" class="product-info">
                                                            <span class="tooltip">Quick view</span>
                                                            <i class="feather-eye"></i>
                                                        </a>
                                                        <a href="javascript:void(0)" class="add-to-cart product-info" data-product-id="<?php echo $product->get_id(); ?>">
                                                            <span class="tooltip">Add to cart</span>
                                                            <i class="feather-shopping-cart"></i>
                                                        </a>
                                                        <a href="javascript:void(0)" class="add-to-wishlist product-info" data-product-id="<?php echo $product->get_id(); ?>">
                                                            <span class="tooltip">Add to wishlist</span>
                                                            <i class="feather-heart"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-info">
                                                <h6 class="product-name">
                                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                                </h6>
                                                <div class="product-rating">
                                                    <?php echo wc_get_rating_html($product->get_average_rating()); ?>
                                                </div>
                                                <div class="product-price">
                                                    <span class="new-price"><?php echo $product->get_price_html(); ?></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- trending products end -->

    <!-- categories grid start -->
    <section class="categories-grid">
        <div class="container-fluid">
            <div class="categories-grid-area">
                <div class="section-title">
                    <h3>Shop by style</h3>
                    <p>Find your perfect style from our diverse categories</p>
                </div>
                <div class="categories-grid-content">
                    <div class="row g-3">
                        <?php
                        $product_categories = get_terms('product_cat', array(
                            'hide_empty' => true,
                            'number' => 6,
                            'parent' => 0
                        ));
                        
                        if ($product_categories && !is_wp_error($product_categories)) :
                            $counter = 0;
                            foreach ($product_categories as $category) :
                                $counter++;
                                $thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
                                $image_url = wp_get_attachment_url($thumbnail_id);
                                if (!$image_url) {
                                    $image_url = get_template_directory_uri() . '/assets/images/home3/category/category-' . $counter . '.jpg';
                                }
                                
                                // 设置不同的网格大小
                                $col_class = ($counter == 1) ? 'col-12 col-lg-6' : 'col-12 col-lg-3 col-md-6';
                                ?>
                                <div class="<?php echo $col_class; ?>">
                                    <div class="categories-grid-item">
                                        <div class="categories-img">
                                            <a href="<?php echo get_term_link($category); ?>" class="category-link">
                                                <img src="<?php echo esc_url($image_url); ?>" class="img-fluid" alt="<?php echo esc_attr($category->name); ?>">
                                            </a>
                                        </div>
                                        <div class="categories-overlay">
                                            <div class="categories-info">
                                                <h4><?php echo esc_html($category->name); ?></h4>
                                                <p><?php echo $category->count; ?> items</p>
                                                <a href="<?php echo get_term_link($category); ?>" class="btn-style1">Shop now</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php
                                if ($counter >= 6) break; // 限制显示6个分类
                            endforeach;
                        endif;
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- categories grid end -->

    <!-- featured collection start -->
    <section class="featured-collection">
        <div class="container">
            <div class="featured-collection-area">
                <div class="section-title">
                    <h3>Featured collection</h3>
                    <p>Handpicked items from our premium collection</p>
                </div>
                <div class="featured-collection-content">
                    <div class="row">
                        <?php
                        // 获取推荐产品
                        $featured_products = wc_get_featured_product_ids();
                        if (!empty($featured_products)) {
                            $args = array(
                                'post_type' => 'product',
                                'posts_per_page' => 8,
                                'post__in' => $featured_products,
                                'meta_query' => array(
                                    array(
                                        'key' => '_visibility',
                                        'value' => array('catalog', 'visible'),
                                        'compare' => 'IN'
                                    )
                                )
                            );
                        } else {
                            // 如果没有推荐产品，显示最新产品
                            $args = array(
                                'post_type' => 'product',
                                'posts_per_page' => 8,
                                'meta_query' => array(
                                    array(
                                        'key' => '_visibility',
                                        'value' => array('catalog', 'visible'),
                                        'compare' => 'IN'
                                    )
                                )
                            );
                        }
                        
                        $products = new WP_Query($args);
                        
                        if ($products->have_posts()) :
                            while ($products->have_posts()) : $products->the_post();
                                global $product;
                                ?>
                                <div class="col-12 col-lg-3 col-md-6">
                                    <div class="pro-item pro-item-main">
                                        <div class="product-link">
                                            <div class="product-img">
                                                <a href="<?php the_permalink(); ?>" class="product-image">
                                                    <?php echo woocommerce_get_product_thumbnail(); ?>
                                                </a>
                                                <div class="product-action">
                                                    <div class="pro-action">
                                                        <a href="<?php the_permalink(); ?>" class="product-info">
                                                            <span class="tooltip">Quick view</span>
                                                            <i class="feather-eye"></i>
                                                        </a>
                                                        <a href="javascript:void(0)" class="add-to-cart product-info" data-product-id="<?php echo $product->get_id(); ?>">
                                                            <span class="tooltip">Add to cart</span>
                                                            <i class="feather-shopping-cart"></i>
                                                        </a>
                                                        <a href="javascript:void(0)" class="add-to-wishlist product-info" data-product-id="<?php echo $product->get_id(); ?>">
                                                            <span class="tooltip">Add to wishlist</span>
                                                            <i class="feather-heart"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-info">
                                                <h6 class="product-name">
                                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                                </h6>
                                                <div class="product-rating">
                                                    <?php echo wc_get_rating_html($product->get_average_rating()); ?>
                                                </div>
                                                <div class="product-price">
                                                    <span class="new-price"><?php echo $product->get_price_html(); ?></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- featured collection end -->

    <!-- cta banner start -->
    <section class="cta-banner">
        <div class="container-fluid">
            <div class="cta-banner-area">
                <div class="cta-banner-content">
                    <div class="cta-bg">
                        <div class="cta-content">
                            <h2>Get 25% off on your first order</h2>
                            <p>Subscribe to our newsletter and get exclusive deals and offers</p>
                            <div class="cta-form">
                                <form method="post" class="newsletter-form">
                                    <div class="newsletter-wrap">
                                        <input type="email" name="newsletter_email" placeholder="Enter your email address" required>
                                        <button type="submit" class="btn-style1">Subscribe now</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- cta banner end -->

</main>
<!-- main-content end -->